<template>
  <div>
    <el-card>
      <div v-show="currentShowTemplate == 'index'">
        <!-- 表格 -->
        <el-table border height="80vh" :data="skuList">
          <el-table-column
            label="序号"
            type="index"
            align="center"
            width="80"
          ></el-table-column>
          <el-table-column label="名称" prop="skuName"></el-table-column>
          <el-table-column label="描述" prop="skuDesc"></el-table-column>
          <el-table-column label="默认图片">
            <template slot-scope="{ row }">
              <img
                style="width: 120px; height: 100px; object-fit: contain"
                :src="row.skuDefaultImg"
              />
            </template>
          </el-table-column>
          <el-table-column label="重量(KG)" prop="weight"></el-table-column>
          <el-table-column label="价格(元)" prop="price"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                icon="el-icon-bottom"
                type="primary"
                title="下架SKU"
                size="mini"
                v-if="row.isSale == 1"
                @click="skuOnSaleOrCancelSale(row, false)"
              ></el-button>
              <el-button
                icon="el-icon-top"
                type="primary"
                title="上架SKU"
                size="mini"
                v-else
                @click="skuOnSaleOrCancelSale(row, true)"
              ></el-button>

              <el-button
                icon="el-icon-edit"
                type="warning"
                title="编辑SKU"
                size="mini"
                @click="clickEditSkuInfo(row)"
              >
              </el-button>
              <el-button
                icon="el-icon-info"
                type=""
                title="查看SKU"
                size="mini"
                @click="lookSkuInfo(row.id)"
              >
              </el-button>
              <el-popconfirm
                title="确定删除吗？"
                style="margin: 0 10px"
                @onConfirm="delSkuInfo(row.id)"
              >
                <el-button
                  slot="reference"
                  icon="el-icon-delete"
                  type="danger"
                  title="删除SKU"
                  size="mini"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
          @current-change="getSkuList($event)"
          @size-change="getSkuList(false, $event)"
          style="text-align: center"
          :current-page="currentPage"
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :page-size="limitSize"
          :page-sizes="[5, 10, 20, 30]"
          :total="totalPage"
        ></el-pagination>
      </div>
      <!-- 编辑SKU -->
      <editSku
        @changeShow="changeShow"
        v-show="currentShowTemplate == 'edit'"
      ></editSku>
      <!-- 查看SKU -->
      <el-drawer
        @close="isShowSkuInfo = false"
        wrapperClosable
        :visible="isShowSkuInfo"
        :withHeader="false"
        size="50%"
      >
        <el-form style="margin: 10px">
          <el-form-item label="名称">
            <span slot="label" style="font-size: large; font-weight: bold"
              >名称</span
            >
            <span>{{ skuInfo.skuName }}</span></el-form-item
          >
          <el-form-item label="描述">
            <span slot="label" style="font-size: large; font-weight: bold"
              >描述</span
            >
            <span>{{ skuInfo.skuDesc }}</span></el-form-item
          >
          <el-form-item label="价格">
            <span slot="label" style="font-size: large; font-weight: bold"
              >价格</span
            >
            <span>{{ skuInfo.price }}</span></el-form-item
          >
          <el-form-item label="平台属性">
            <span slot="label" style="font-size: large; font-weight: bold"
              >平台属性</span
            >
            <el-tag
              style="margin: 0 10px"
              v-for="data in skuInfo.skuAttrValueList"
              :key="data.id"
              >{{ data.valueName }}</el-tag
            >
          </el-form-item>
          <el-form-item label="售卖属性">
            <span slot="label" style="font-size: large; font-weight: bold"
              >售卖属性</span
            >
            <el-tag
              style="margin: 0 10px"
              v-for="data in skuInfo.skuSaleAttrValueList"
              :key="data.id"
              >{{ data.saleAttrValueName }}</el-tag
            ></el-form-item
          >
          <el-form-item label="商品图片">
            <span slot="label" style="font-size: large; font-weight: bold"
              >商品图片</span
            >
            <el-carousel
              trigger="click"
              style="height: 50vh; width: 60%; margin: 0"
            >
              <el-carousel-item
                v-for="item in skuInfo.skuImageList"
                :key="item.id"
              >
                <img
                  :src="item.imgUrl"
                  :alt="item.imgName"
                  style="width: 100%; height: 100%; object-fit: contain"
                />
              </el-carousel-item>
            </el-carousel>
          </el-form-item>
        </el-form>
      </el-drawer>
    </el-card>
  </div>
</template>

<script>
import editSku from './editSku'
export default {
  components: {
    editSku
  },
  data() {
    return {
      // 查看SKU
      skuInfo: {},
      isShowSkuInfo: false,
      // 页面切换
      currentShowTemplate: 'index',
      // 展示数据
      skuListInfo: {},
      // 分页器
      currentPage: 1,
      limitSize: 10
    }
  },
  computed: {
    totalPage() {
      return this.skuListInfo.total || 0
    },
    skuList() {
      return this.skuListInfo.records || []
    }
  },
  methods: {
    // 查看SKU
    async lookSkuInfo(id) {
      const res = await this.$API.sku.getSkuInfoById(id)
      if (res.code == 200) {
        this.skuInfo = res.data
        this.isShowSkuInfo = true
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    // 删除SKU
    async delSkuInfo(id) {
      const res = await this.$API.sku.delSkuInfo(id)
      if (res.code == 200) {
        this.$message({ type: 'success', message: '删除成功' })
        // 跟新列表数据
        this.getSkuList()
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    changeShow(is_update, flag) {
      if (is_update) {
        this.getSkuList()
      }
      if (flag) this.currentShowTemplate = flag
      else this.currentShowTemplate = 'index'
    },
    // 编辑SKU
    clickEditSkuInfo(row) {
      this.$Bus.$emit('editSkuInfo', row)
    },
    // 上架,下架sku
    async skuOnSaleOrCancelSale(row, isOnSale) {
      const res = await this.$API.sku.skuOnSaleOrCancelSale(row.id, isOnSale)
      // 就在本地修改数据进行展示,不跟新数据了
      if (res.code == 200) {
        if (isOnSale) {
          row.isSale = 1
        } else {
          row.isSale = 0
        }
        this.$message({
          type: 'success',
          message: isOnSale ? '上架成功' : '下架成功'
        })
      } else {
        this.$message({
          type: 'error',
          message: res.message + ':' + (res.data || '')
        })
      }
    },
    // 展示列表
    async getSkuList(page, limit) {
      let { currentPage, limitSize } = this
      if (page) {
        currentPage = page
      }
      if (limit) {
        limitSize = limit
      }

      const res = await this.$API.sku.getSkuList(currentPage, limitSize)
      if (res.code == 200) {
        this.skuListInfo = res.data
      }
    }
  },

  created() {
    this.getSkuList()
  }
}
</script>

<style></style>
